//物资采购结算 列表
<template>
    <div lass="base-page">
        <!-- 列表 ↓ -->
        <div class="right">
            <opstep :stepInfo="stepsArr"></opstep>
            <div class="e-table">
                <div class="top">
                    <div class="left">
                        <div class="left-btn">
                            <el-button type="primary"
                                @click="goAdd"
                                class="btn-greenYellow"
                            >新增</el-button>
                        </div>
                    </div>
                    <div class="search_box">
                        <el-input class="ipt" type="text"
                            placeholder="输入搜索关键字"
                            v-model="searchKey"
                            @select="onSearch"
                            @change="onSearch"
                        ><img src="@/assets/search.png" slot="suffix" @click="onSearch" /></el-input>
                        <div class="adverse">
                            <el-button type="primary" size="small">高级搜索</el-button>
                        </div>
                    </div>
                </div>
            </div>
             <div class="e-table">
                <el-table
                    class="table"
                    :style="{width: rightTableWidth}"
                    :height="rightTableHeight"
                    :data="tableData"
                    border
                    :cell-class-name="cellClsNm"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column prop="billNo" label="结算编号">
                           <template slot-scope="scope">
                        <span style="color:blue" @click="goSee(scope.row)">{{scope.row.billNo}}</span>
                    </template>
                    </el-table-column>
                    <!-- <el-table-column prop="billNo" label="结算编号"> </el-table-column> -->
                    <el-table-column prop="settlementDate" label="结算日期"> </el-table-column>
                    <el-table-column prop="orgName" label="所属机构"> </el-table-column>
                    <el-table-column prop="settlementUnitName" label="结算单位"> </el-table-column>
                    <el-table-column prop="contractType" label="业务类型"> </el-table-column>1
                    <el-table-column prop="amount" label="结算金额(元)"> </el-table-column>
                    <el-table-column prop="totalAmount" label="税价合计(元)"> </el-table-column>
                    <el-table-column prop="returnDepositAmount" label="累计结算金额(元)"> </el-table-column>
                    <el-table-column prop="evaluationLevel" label="评价"> </el-table-column>
                    <el-table-column prop="state" label="状态" width="200">
                        <template slot-scope="{ row }">
                            {{ row.state - 0 == -1 ? '已删除' : ['草稿', '审核中','已审核'][row.state] }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="returnDepositAmount" label="红单状态"> </el-table-column>
                    <!-- <el-table-column type="selection" width="55" fixed> </el-table-column> -->
                    <!-- <el-table-column prop="currencyName" label="币种名称"> </el-table-column>
                    <el-table-column prop="state" label="引用状态" width="200">
                        <template slot-scope="{ row }">
                            {{ ['未引用', '已引用'][row.state] }}
                        </template>
                    </el-table-column> -->
                </el-table>
            </div>
            <Pagination
                :total="paginationInfo.total"
                :pageSize.sync="paginationInfo.pageSize"
                :currentPage.sync="paginationInfo.currentPage"
                @currentChange="fanyechanger(paginationInfo.currentPage)"
                @sizeChange="shumachanger(paginationInfo.pageSize)"
            />
        </div>
        <!-- 列表 ↑ -->

        <!-- 新增编辑界面  ↓-->
        <!-- 新增编辑界面  ↑-->
    </div>
</template>

<script>
import '@/utils/jquery.scrollTo.min'
import Pagination from '@/components/pagination/pagination'
// import AttachComp from '@/components/common/attachIndex'
// import ComPagination from '@/components/pagination/pagination.vue'
import request from '@/api/materialSettlement/materialProcurement.js'
import { debounce } from '@/utils/common'
import opstep from '@/components/topstep/topstep.vue'
// import { selectDataClient, openAppClient, advanceSearch } from '@/utils/common'
export default {
    components: {
        Pagination,
        opstep
        // AttachComp, //附件信息
        // ComPagination, //分页组件
    },
    computed: {
        // 列表宽度
        rightTableWidth () {
            return (this.screenWidth - 20) + 'px'
        },
        rightTableHeight () {
            if (this.paginationInfo.total > 0) {
                return this.screenHeight - 170
            } else {
                return this.screenHeight - 118
            }
        },
        // tabs内表格宽度
        rightTabsWidth () {
            return (this.screenWidth - 22) + 'px'
        },
        rightTabsHeight () {
            return (this.screenHeight - 74) + 'px'
        },
        // 填补底部空白，以使高度够滚动
        seatHeight () {
            return this.screenHeight - 115 - this.lastConHeight
        },
    },
    data () {
        return{
            stepsArr: [{ description: '①现场收料' }, { description: '②物资验收' }, { description: '③采购结算' }],
            viewList: true, //控制显示菜单别表 还是添加列表
            paginationInfo: {
                total: 1,
                pageSize: 10,
                currentPage: 0
            },
            query: {
                beginPlanDate: '',
                endPlanDate: '',
                keyword: '',
                limit: 10,
                orgId: '',
                page: 1,
                settlementUnitId: '',
                states: []
            }, //搜索
            searchKey: '', //右上角搜索关键字
            tableData: [], //表格

            // 公共数据不写要报错 ↓
            screenWidth: '',
            screenHeight: '',
            clickTabFlag: false, // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            childTabClass: '',
            tabsNameChild: '',
            // add页面
            formData: {
                billNo: '',
                settlementUnitName: '', //单据机构name
                contractType: '', //合同类型
                contractName: '', //合同名称
                // settlementUnitName: '', //结算单位名称
                settlementUnitId: '', //结算单位ID
                settlementDate: '', //加扣款日期
                plusDeductionAmount: 0, //加扣款金额
                rmbReturnDepositAmount: '', //返还保证金金额(人民币)
                currency: '', //币种
                gx: '', //传财务共享 随便写的 需要改
                baseCurName: '', //本位币name
                baseCurId: '', //本位币id
                state: '', //状态
                baseCurPlusDeductionAmount: 0, //加扣款金额(本位币)
                baseCurReturnDepositAmount: 0, //返回保证金金额
                remarks: '' //备注
            },
            tabsName: 'baseInfo1',
            idsTop: [],
            typeArr: [
                { name: '草稿', id: 0 },
                { name: '审核中', id: 1 },
                { name: '共享审核中', id: 9 },
                { name: '已审核', id: 2 },
                { name: '已关闭', id: -1 },
                { name: '已作废', id: 5 },
            ],
            rules: {
                orgName: [
                    { required: true, message: '请选择机构', trigger: 'blur' },
                ],
                currency: [
                    { required: true, message: '请选择本位币', trigger: 'blur' },
                ]
            }

        }
    },
    mounted () {
        // console.log(request)
        // console.log(this.query, 'ppp')

        // 获取最后一个内容区域的高度，计算底部空白
        // this.getLastConHeight()
        // // 获取屏幕宽高
        this.getScreenInfo()
        // // 注册滚动事件
        this.registScroll()

        window.addEventListener('resize', debounce(this.getScreenInfo))
    },
    async created () {
        // const tabledata = request.getpaymentList(this.query)
        // tabledata.list == null ? this.tableData = [] : this.tabledata = tabledata.list
        const data = await request.getpaymentList(this.query)
        console.log(data, 'data')
        //
        //         :total="paginationInfo.total"
        //         :pageSize.sync="paginationInfo.pageSize"
        //         :currentPage.sync="paginationInfo.currentPage"
        this.paginationInfo.total = data.totalCount
        this.paginationInfo.pageSize = data.pageSize
        this.paginationInfo.currentPage = data.currPage
        if(data.list !== null) {
            for(let i = 0 ; i < data.list.length; i++) {
                this.$set(this.tableData, i, data.list[i])
            }
        }
    },
    methods: {
        async fanyechanger (e) {
            console.log(e, '第几页')
            this.query.page = e
            this.tableData = []
            const data = await request.getpaymentList(this.query)
            this.paginationInfo.total = data.totalCount
            this.paginationInfo.pageSize = data.pageSize
            this.paginationInfo.currentPage = data.currPage
            if(data.list !== null) {
                for(let i = 0 ; i < data.list.length; i++) {
                    this.$set(this.tableData, i, data.list[i])
                }
            }
        },
        async shumachanger (size) {
            console.log(size, '多少个')
            this.query.page = 1
            this.query.limit = size
            this.tableData = []
            const data = await request.getpaymentList(this.query)
            this.paginationInfo.total = data.totalCount
            this.paginationInfo.pageSize = data.pageSize
            this.paginationInfo.currentPage = data.currPage
            if(data.list !== null) {
                for(let i = 0 ; i < data.list.length; i++) {
                    this.$set(this.tableData, i, data.list[i])
                }
            }
        },
        goSee (data) {
            console.log(data)
            this.$router.push({ path: '/materialProcurement', query: { was: 'see', billid: data.billId, billtype: '1020', state: data.state2 } })
            console.log(data)
        },
        goAdd () {
            //点击新增触发
            this.$router.push({ path: '/materialProcurement', query: { was: 'add' } })
        },
        onSearch () {
            // 高级搜索触发
        },
        handleSelectionChange () {
            //当tabale列表发生变化时触发
        },
        onSave () {
            //点击保存
        },
        onDel () {
            //点击删除
        },
        onCancel () {
            //点击取消
            this.$router.push('/supplierAddpayment')
        },
        demo1 () {
            console.log('demo1')
        },
        cellMouseEnter () {
            //添加 详情页面 审核表格
        },

        //公共方法 ↓
        getScreenInfo () {
            let screenWidth = document.documentElement.clientWidth || document.body.clientWidth
            let screenHeight = document.documentElement.clientHeight || document.body.clientHeight
            this.screenWidth = screenWidth
            this.screenHeight = screenHeight
        },
        cellClsNm ({ column }) {
            if (column.label === '') {
                return 'fixed-left'
            }
        },
        // 获取最后一个内容区域的高度，计算底部空白
        getLastConHeight () {
            let si = setInterval(() => {
                // 因为dom异步加载，通过轮询找到渲染后的dom，获取高度
                if (document.getElementById('detailCon')) {
                    console.log('执行了我iii')
                    const lastConHeight = document.getElementById('detailCon').offsetHeight
                    this.lastConHeight = lastConHeight - 18
                    clearInterval(si)
                    si = null
                }
            }, 100)
        },
        onChangeTab (e) {
            console.log(e)
            console.log(this.idsTop, 'uuu')
            const cur = this.idsTop.find(item => item.name === e.name)
            $('#tabs').scrollTo(cur.top, 500)
            // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            this.clickTabFlag = true
            // 动画结束后，恢复状态
            setTimeout(() => {
                this.clickTabFlag = false
            }, 600)
        },
        // 注册右侧tabs区域内滚动时定位
        registScroll () {
            let si = setInterval(() => {
                if (document.getElementById('tabs')) {
                    console.log('进入这个判断')
                    // 保存所有tabName
                    const arr = ['baseInfo1', ['baseInfo2', 'materialDetails', 'technicalParameter'], 'baseInfo3', 'baseInfo4', 'baseInfo5']
                    const me = this
                    let $idsTop = []
                    if (!$idsTop[$idsTop.length - 1]) {
                        $idsTop = arr.map(item => {
                            const $item = document.getElementById(item)
                            let itemTop = 0
                            if ($item) {
                                itemTop = $item.offsetTop
                            }
                            return {
                                name: item,
                                top: itemTop
                            }
                        })
                    }
                    this.idsTop = $idsTop

                    $('#tabs').on('scroll', function () {
                        // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
                        if (me.clickTabFlag) {
                            return
                        }

                        const scrollTop = $(this).get(0).scrollTop
                        // 倒序查找
                        let curLocal = 0
                        for (let len = $idsTop.length, i = len - 1; i >= 0; i--) {
                            let item = $idsTop[i].top
                            if (scrollTop + 3 >= item) {
                                curLocal = i
                                break
                            }
                        }
                        // 设置对应tabName
                        me.tabsName = arr[curLocal]
                    })

                    clearInterval(si)
                    si = null

                }
            }, 100)

        },
    }
}
</script>

<style lang="scss" scoped>
::v-deep.el-input__suffix{
    display: flex;
    align-items: center;
}
.e-table .el-table{
    ::v-deep.none{
        .el-checkbox{display: none;}
    }
}
 .demo888{
    height: 300px;
 }
 .thehead{
    background-color: #F2F2F2;
    height: 70px;
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .box{
        height: 50px;
        line-height: 50px;
        font-size: 28px;
        color: white;
        background-color: #33AB9F;
        margin-right: 20px;
        margin-left:10px ;
        padding-left: 16px;
        padding-right: 16px;
        border-radius: 10px;
    }
 }
 .childTab {
  ::v-deep .el-tabs__header {
    position: absolute !important;
  }
  ::v-deep .el-tabs__content {
    padding: 0 0 0 20px !important;
  }
}
.childTab1 {
  ::v-deep .el-tabs__header {
    position: absolute !important;
    .el-tabs__nav-scroll {
      position: relative;
      .el-tabs__nav {
        position: fixed;
        top: 0;
        width: 190px;
      }
    }
  }
}
.childTab2 {
  ::v-deep .el-tabs__header {
    position: absolute !important;
    .el-tabs__nav-scroll {
      position: relative;
      .el-tabs__nav {
        position: absolute;
        bottom: 0;
        width: 100%;
      }
    }
  }
}
</style>
